<template>
  <div>
    <h1>组件:传参</h1>
    <CounterCom v-model="size"></CounterCom>
    <CounterCom :modelValue="size" @update:modelValue="size=$event"></CounterCom>
    <div :style="{border:'1px solid red','width':size+'px','height':size+'px'}">{{ size }}</div>
    <Teleport to="body">
      <!-- <ModalCom title="标题" :visible="visible"   @update:visible="visible=$event"> -->
        <ModalCom v-model:visible="visible"  title="标题">
        <div>弹框内容</div>
      </ModalCom>
    </Teleport>
    <button @click="visible=true">弹</button>
    <CounterCom v-model="size" ref="counter"></CounterCom>

    <button @click="counter.bigAdd()">父组件访问子组件的bigAdd方法</button>

  </div>
</template>
<script setup>
import { ref,provide} from 'vue'; 
// 定义并导入一个CounterCom:点击就加1
// 传入props step:步长 默认1(点一下加多少)
// 传入props modalValue: 默认值
import CounterCom from './components/CounterCom.vue' 
import ModalCom from './components/ModalCom.vue'
const size = ref(10);
// 定义弹框组件
// props: title:标题 ,slot 内容,visible 是否显示
// 事件: update:visible
const visible = ref(false);
const counter = ref(null);
const width = ref(100);
// 通过provide提供一个width
provide('width',width)
</script>